<template>
  <a-dropdown style="display: inline-block; height: 100%; vertical-align: initial">
    <span style="cursor: pointer">
      <a-avatar
        class="avatar"
        size="small"
        shape="circle"
        :src="currUser.avatar || require('../assets/logo.png')"
      />
      <span>{{currUser.name}}</span>
    </span>
    <a-menu style="width: 150px" slot="overlay">
      <!-- <a-menu-divider /> -->
      <a-menu-item>
        <div @click="logout" class="middle-flex">
          <a-icon type="poweroff"/>
          <span style="padding-left: 5px">退出登录</span>
        </div>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
export default {
  name: 'HeaderAvatar',
  computed: {
    currUser() {
      return this.$store.state.user
    }
  },
  methods: {
    async logout() {
      await this.$store.dispatch('logout')
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  margin: 20px 4px 20px 0;
  color: #1890ff;
  background: hsla(0, 0%, 100%, 0.85);
  vertical-align: middle;
}
</style>
